
import { React, Component } from 'react';
import './Project-View.css'
import 'tdesign-mobile-react/es/style/index.css';
// import { Swiper } from 'tdesign-mobile-react';
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';
import { FormUp } from 'grommet-icons';
import { FormDown } from 'grommet-icons';

export default class ProjectView extends Component {

  constructor(props) {
    super(props);
    this.state = {
      more: this.props.more,
      data: this.props.data,
    }
  }

  open = () => {
    this.setState({
      more: !this.state.more
    });
  }
  render () {
    return (
      <div className='project-view' >
        <div className='project-title' onClick={this.open}>
          <p> {this.state.data.title}</p>
          <div className='icon'>{this.state.more ? <FormUp /> : <FormDown />}</div>
        </div>
        {this.state.more && <div className={this.state.more ? 'project-info-open' : 'project-info-out'}>
          <div className='project-info'>
            {/* <div className='project-info-title'>
              <div>{this.state.data.project.projectTitle.time}</div>
              <div>{this.state.data.project.projectTitle.pname}</div>
              <div>{this.state.data.project.projectTitle.team}</div>
            </div> */}
            <div className='project-info-poit'>
              <div>【所用技术】</div>
              <div className='blank' dangerouslySetInnerHTML={{ __html: this.state.data.project.skill }}></div>
            </div>
            <div className='project-info-poit'>
              <div>【项目描述】</div>
              <div className='blank' dangerouslySetInnerHTML={{ __html: this.state.data.project.describe }}></div>
            </div>
            <div className='project-info-poit'>
              <div>【功能介绍】</div>
              <div className='blank' dangerouslySetInnerHTML={{ __html: this.state.data.project.functionInfo }}></div>
            </div>
            {this.state.data.project.href && <div className='project-info-poit'>
              <div><a href={this.state.data.project.href}>【在线预览】</a></div>
            </div>}


            <div className='project-info-image'>
              <div className='project-info-imge-title'>【部分截图展示】点击查看</div>
              <PhotoProvider>
                {
                  Object.keys(this.state.data.project.images).map((item, index) => {
                    return <PhotoView src={this.state.data.project.images[item]}>
                      {index < 3 && <div className='project-imge-swiper'>
                        <img className='p_img' src={this.state.data.project.images[item]} alt="图片" />
                      </div>}
                    </PhotoView>
                  })
                }
              </PhotoProvider>
            </div>
          </div>
        </div>}
      </div>
    );
  }
}
